<template>
    <div class="wrap">
        <div class="info">
            <h2>您好!</h2>
            <p>欢迎来到职业帮，立即注册</p>
        </div>
        <van-form @submit="login" style="width: 100%">
            <van-field v-model="username" name="手机号" label="手机号" placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
            <div style="width: 100%;display:flex;">
                <van-field v-model="password" type="number" name="验证码" label="验证码" placeholder="验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]" style="width: 71%" />
                <van-button style="border-radius:22px;background-color:#149639; color:#fff">获取验证码</van-button>
            </div>
            <div style="margin-top: 18px">
                <van-button block native-type="submit"
                    style="border-radius:22px;background-color:#149639; color:#fff; margin-bottom: 20px">提交</van-button>
                <van-button block style="border-radius:22px; color:#fff" type="primary"
                    @click="goHome">返回主页</van-button>
            </div>
        </van-form>
        <div class="foot"></div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { loginByphone } from "../api/home.js";
import { showToast } from "vant";
import { useUserStore } from "../stores/useUserStore.js";
import TencentCloudChat from "@tencentcloud/chat";
import { chat } from '../utils/chat';
import { useChatStore } from '../stores/useChatStore.js';
import { genTestUserSig } from '../utils/GenerateTestUserSig.js';
const router = useRouter()
const userStore = useUserStore()
const chatStore = useChatStore()

console.log(userStore.token)
let username = ref('')
let password = ref('')
let onSdkReady = function (event) {
    console.log('sdk 初始化完成', event);
    chatStore.setReady()
};
chat.on(TencentCloudChat.EVENT.SDK_READY, onSdkReady);
const login = async () => {
    const res = await loginByphone({ phone: username.value, code: password.value })
    if (res.statusCode == 200) {
        console.log(res);
        showToast("登陆成功!")
        userStore.userInfo = res.data.userInfo
        userStore.token = res.data.token
        let { userSig } = genTestUserSig({ SDKAppID: chatStore.SDKAppID, secretKey: chatStore.secretKey, userID: userStore.userInfo.name })
        const IMres = await chat.login({ userID: userStore.userInfo.name, userSig: userSig })
        if (IMres.code == 0) {
            alert('登录成功')
            chatStore.setUser(IMres.data)
            console.log(chatStore.user);
        }
        if (IMres.data.repeatLogin === true) {
            console.log(IMres.data.errorInfo);
        }
        router.push({
            path: router.currentRoute.value.query.redirect
        })
    } else {
        showToast("请检查手机号码或验证是否正确")
    }
}
const goHome = () => {
    router.push({
        path: '/home'
    })
}

</script>

<style scoped lang="less">
.wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;

    .info {
        width: 100%;
        height: 107px;
        padding-bottom: 50px;

        h2 {
            font-size: 24px;
            color: #181818;
            padding-bottom: 15px;
        }

        p {
            font-size: 18px;
            color: #333;
        }
    }

    .foot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #fff;
        z-index: 99999;
    }
}
</style>